<template>
        <div class="select_class">
                <header >
                    <a @click="$api.goBack()" class="back"></a>
                    <span>{{title}}{{action}}</span>
                    <a class="add" @click="batch()" v-if="!batchState" >批量点名</a>
                    <a class="add" @click="batch()" v-if="batchState">单个点名</a>
                </header>
                <div class="flex_wrap" style="justify-content: center;border:1px solid #f2f2f2;padding:0.4rem 0">
                    <input class="date_pick" v-model="date" readonly  />
                    <mt-button type="default" @click="openClassPicker" v-if="selectClass" size="small" style="margin:0 0.3rem;">{{tureSelectClass}}</mt-button>
                    <!-- <mt-button type="default" @click="openClassPicker" v-if="!selectClass" size="small" style="margin:0 0.3rem;">班级选择</mt-button> -->
                    <mt-button type="default" @click="showDetail"  size="small" >{{action}}详情</mt-button>
                </div>
                <mt-index-list >
                    <mt-index-section  v-for="(site,index) in siteData" :key="index" :class="{'section1':index==siteData.length-1&&!batchState,'section2':index==siteData.length-1&&batchState}" :index="site">
                        <div class="main" v-for="(item,index) in showData" v-if="item.sortName==site"> 
                            <div class="flex">
                                <div class="flex_column" v-if="batchState" >
                                    <input type="checkbox" v-model="item.checked" value="item.studentId" />
                                </div>
                                <!-- <div class="head">
                                    <img :src="item.studentPhoto" />
                                </div> -->
                                <div class="classroom">
                                    <div class="className">{{item.studentName}}</div>
                                    <div class="teacher">{{item.className}}</div>
                                </div>
                            </div>                       
                            <div class="right" v-if="!batchState" >
                                <mt-button type="default" v-if="!markType" @click="qiandaoOrqingjia(item,2)" size="small" style="margin:0 0.3rem;">请假</mt-button>
                                <mt-button type="primary" @click="qiandaoOrqingjia(item,1)" size="small" >{{action}}</mt-button>
                            </div>
                            <!-- <div @click="$api.tell(item.phone)" class="tell_phone"></div> -->
                        </div>
                    </mt-index-section>
                    <div class="footer" v-if="markType==0||markType==1" style="right:21px;">
                        <div class="num_wrap">
                            <div>总人数{{allNum}}人</div>
                            <div>已{{action}}{{alreadNum}}人</div>
                            <div>已请假{{leaveNum}}人</div>
                            <div>未{{action}}{{nonNum}}人</div>
                        </div>
                        <div class="buttons_wrap" v-if="batchState">
                                <mt-button type="default" size="small" @click="checkAll()" >全选</mt-button>
                                <mt-button type="default" size="small" @click="checkInverse()" >反选</mt-button>
                                <mt-button type="default" size="small" v-if="!markType" @click="qiandaoOrqingjia(false,2)" >请假</mt-button>
                                <mt-button type="primary" size="small" @click="qiandaoOrqingjia(false,1)" >{{action}}</mt-button>
                        </div>
                    </div>
                </mt-index-list>
                <mt-popup style="background:white;width:100%;"
                v-model="popupClass"
                position="bottom">
                <div class="picker-toolbar" style="border-bottom:1px solid #f2f2f2">
                    <span @click="SureOrCanelSelect(1)" class="mint-datetime-action mint-datetime-cancel">取消</span> 
                    <span @click="SureOrCanelSelect()" class="mint-datetime-action mint-datetime-confirm">确定</span>
                </div>
                <mt-picker :slots="slots"  @change="ChangeClass"></mt-picker>
                </mt-popup>
                <mt-datetime-picker v-model='dateFromDate' ref="fromDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
                    date-format="{value} 日" @confirm="date=$api.formatDate(dateFromDate)" :endDate='new Date()'>
                </mt-datetime-picker>
                <!-- <mt-actionsheet
                :closeOnClickModal=false
                cancelText=''
                :actions="actions"
                v-model="sheetVisible">
                </mt-actionsheet> -->
        </div>
    </template>
<script>
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                date: '', //日期,
                dateFromDate: '', //过度用日期,无实际作用
                allNum: 0,
                alreadNum: 0,
                nonNum: 0,
                leaveNum: 0,
                pageNum: 1,
                useInfo: '',
                pageSize: 100000,
                url: '',
                title: '',
                action: '',
                addUrl: '', //
                markType: null, //存储签到还是签退,0为签到,1为签退
                classlist: [], //存储班级列表
                classId: null,
                popupClass: false,
                selectClass: '', //过度用班级无实际作用
                tureSelectClass: '班级过滤', //选中的班级名字,用于匹配班级id
                sheetVisible: true,
                slots: [{
                    flex: 1,
                    values: [],
                    className: 'slot1',
                    textAlign: 'center'
                }],
                batchState: false,
                showData: [],
            }
        },
        methods: {
            openFromPicker() { //打开时间选择器
                this.$refs.fromDatepicker.open();
            },
            openClassPicker() { //打开班级选择器
                this.popupClass = true;
            },
            getNowDate() { //获取当前时间
                this.date = this.$api.formatDate(new Date());
                this.dateFromDate = this.$api.formatDate(new Date());
            },
            showDetail() { //查看签到详情
                this.$router.push({
                    path: 'qiandaolist'
                })
            },
            SureOrCanelSelect(cancel) { //班级选择器 确定取消点击事件
                if (!cancel) { //点击确定,这里做点什么
                    this.classlist.forEach(element => {
                        if (element.className == this.selectClass) {
                            this.classId = element.classId
                            this.tureSelectClass = this.selectClass;
                            sessionStorage.setItem('classId', this.classId);
                            this.getInfo();
                        }
                    })

                }
                this.popupClass = false;
            },
            ChangeClass(picker, Class) {
                console.log(123);
                this.selectClass = Class[0]
            },
            getClassList() { //获取班级列表
                var url = "/class/classList"
                var type = sessionStorage.getItem('studentListType');
                var params = {
                    schoolId: this.useInfo.schoolId,
                }
                if (type == '4') {
                    params.classType = 1; //(0:托管班,1:培训班)'
                } else {
                    params.classType = 0; //
                }

                this.$api.post(url, params, (data) => {

                    this.classlist = data.info
                    if (this.classlist.length == 0 && params.classType == 1) {
                        MessageBox('提示', '没有培训班或者培训班已过期!');
                        this.$api.goBack();
                        return;
                    }
                    if (this.classlist.length == 0 && params.classType == 1) {
                        MessageBox('提示', '没有托管班或者托管班已过期!');
                        this.$api.goBack();
                        return;
                    }
                    // this.classId = data.info[0].classId
                    // sessionStorage.setItem('classId', this.classId);
                    this.classlist.forEach(element => {
                        this.slots[0].values.push(element.className);
                    });
                    this.getInfo();
                })
            },
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            getUrl() { //获取接口地址
                var type = sessionStorage.getItem('studentListType');
                this.markType = JSON.parse(sessionStorage.getItem('markType')); //0签到 1签退
                switch (type) {
                    case '1':
                        this.url = "/noonMark/selectPage" //如果是午托
                        this.addUrl = "/noonMark/add"
                        this.title = "午托"
                        break;
                    case '2':
                        this.url = "/nightMark/selectPage" //如果是晚托
                        this.addUrl = "/nightMark/add"
                        this.title = "晚托"
                        break;
                    case '4':
                        this.url = "/lessonMark/selectPage" //如果是课程点名
                        this.addUrl = "/lessonMark/add"
                        this.title = "课程点名"
                        break;
                }
            },
            getInfo() { //调用接口获取数据,用于刷新页面等操作
                this.action = this.markType ? '签退' : '签到'
                var url = this.url
                var params = {
                    pageNum: this.pageNum,
                    markFlag: 1,
                    isFlag: 1,
                    stuStatus: 1,
                    pageSize: this.pageSize,
                    markType: this.markType,
                    schoolId: this.useInfo.schoolId,
                    classId: this.classId,
                }
                this.$api.post(url, params, (data) => {
                    console.log(JSON.parse(JSON.stringify(data)))
                    this.alreadNum = data.info.voCount.alreadNum;
                    this.leaveNum = data.info.voCount.leaveNum;
                    this.showData = data.info.page.list;
                    this.allNum = data.info.voCount.allNum;
                    this.nonNum = data.info.voCount.nonNum;
                    this.showData.forEach(element => {
                        element.checked = false;
                    });
                })
            },
            batch() { //进去或取消批量签到
                this.batchState = !this.batchState
            },
            checkAll() { //全选

                this.showData = this.showData.map(x => {
                    x.checked = true;
                    return x
                })
            },
            checkInverse() { //反选
                this.showData = this.showData.map(x => {
                    x.checked = !x.checked
                    return x
                })
            },
            qiandaoOrqingjia(student, markFlag) { //签到或者请假,markFlag 1 签到 2 请假
                var array = [];
                var studentIds = '';
                if (student) { //单个签到
                    array.push({
                        studentId: student.studentId,
                        classId: student.classId
                    });
                } else { //多个签到
                    array = this.getCheckStudentId();
                    if (array.length == 0) {
                        MessageBox('提示', '请选择学生');
                        return;
                    }
                }
                // array.forEach(element => {
                //     studentIds = studentIds + element + ','
                // })
                var url = this.addUrl
                var params = {
                    schoolId: this.useInfo.schoolId,
                    markUserId: this.useInfo.userId,
                    markFlag: markFlag,
                    markType: this.markType,
                    studentIds: JSON.stringify(array),
                }
                if (this.markType == 1) { //如果是签退,markFlag就设为3
                    params.markFlag = 3;
                }
                this.$api.post(url, params, (data) => {
                    this.getInfo();
                    MessageBox('提示', '操作成功');
                })

            },
            getCheckStudentId() { //获取选中的学生id
                var array = []
                this.showData.forEach(element => {
                    if (element.checked) {
                        array.push({
                            studentId: element.studentId,
                            classId: element.classId
                        });
                    }
                });
                return array;
            }
        },
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
                // this.showData.forEach(element => {


                // });
            }
        },
        created() {
            this.getUrl();
            this.getNowDate(); //获取当前时间
            this.getUserInfo();
            this.getClassList(); //获取班级列表
            //获取学生列表
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>